<template>
  <div>
    <div style="width: 70%;margin-left:15%;background-color:white;display:flex;border-radius:3px;margin-top:40px;height:60px;line-height:60px">
      <div style="font-size: 28px;font-weight:500;
                  color:rgb(0, 200, 255);margin-left:10px;
                  width:50%">
        分类
      </div>
      <div style="flex: 1;text-align:right;padding-right:10px">
        共<span style="font-size:26px;color:rgb(255, 123, 0)">{{ types.length }}</span>个
        <span><el-button size="mini" type="text" @click="allBlog">全部</el-button></span>
      </div>
    </div>
    <div style="width:70%;word-break:break-all;display:flex;flex-wrap: wrap;margin-left: 15%;padding-top:40px;background:white;border-top:2px #eee solid;padding-bottom:10px">
      
        <div v-for="type of types" :key="type.id" style="flex-wrap: wrap;">
          <div style="display:flex" :title="type.name">
            <a class="types" href="#" @click="typeOne(type.id)">{{ type.name }}</a>
            <div class="number">{{ type.count }}</div>
          </div>
        </div>
        
    </div>

<!-- 博客区域 -->
    <div class="blog">
      <div class="content" v-for="blog of blogs" :key="blog.id">
        
        <div style="margin-left: 30px;">
          <a href="#" class="bl" :title="blog.name">
            <h4>{{ blog.title }}</h4>
            <div style="width: 60%;">{{ blog.description }}</div>
          </a>
          
          <div style="margin-top: 10px;padding-bottom:10px">
            <a href="#" class="userInfo" title="张三">
                <div style="display:flex;padding-left:20px">
                  <!-- 用户头像 -->
                  <el-avatar :src="'http://localhost:8081/api/files/'+blog.headImg" style="width: 35px;height:35px"></el-avatar>
                  <!-- 用户相关信息 -->
                  <div style="margin-top: 12px;">
                    <span style="margin-left: 30px;">{{ blog.username }}</span>
                    <span style="margin-left: 30px;">{{ blog.updateTime }}</span>
                    <span style="margin-left: 30px;"><i class="el-icon-view"></i>{{ blog.views }}</span>
                  </div>
                  <div style="border: 1px rgba(30, 181, 240, 0.913) solid;
                              color:rgb(0, 179, 255);
                              font-weight:700;margin-left:100px;
                              height:20px;line-height:20px;
                              font-size:10px;
                              border-radius:5px;
                              margin-top:12px">
                    {{ blog.typeName }}
                    
                  </div>
                </div><hr style="width: 90%;margin-right:10%">
              </a>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      background
      @current-change="page"
      layout="prev, pager, next"
      :total="blogNumber"
      :page-count="blogPage"
      :page-size="7"
      style="margin-top: 10px;margin-left:30%">
    </el-pagination>    
  </div>
</template>

<script>
import request from '../../utils/request'
export default {
    name:'TypeView',
    data(){
      return{
        types:[],
        blogs:[],
        blogNumber: 0,
        blogPage: 0,
        currentPage: 0,
      }
    },
    computed:{
      typeNumber(){
        return this.types.length
      }
    },
    created(){
      request.get('/user/view/type').then((res) => {
        if(res.code=='200'){
          this.types=res.data
          console.log('分类个数');
          console.log(this.types);
          
        }
        else{
          this.$notify.warning('分类获取失败')
        }
      })

      this.allBlog()
    },
    methods:{
      page(page){

      },
      typeOne(id){
        request.get('/user/type/blog/'+id).then((res) => {
          if(res.code=='200'){
            this.blogs = res.data.list
            this.blogPage = Math.round(this.total/5)
            this.blogNumber = res.data.total
          }else{
            this.$notify.warning(res.msg)
          }
        })
      },
      allBlog(){
        request.get("/user/blogs").then((res) => {
          if(res.code=='200'){
            this.blogs = res.data.list
            this.blogPage = Math.round(this.total/5)
            this.blogNumber = res.data.total
          }else{
            this.$notify.warning(res.msg)
          }
        })
      }
    }
}
</script>

<style scoped>
.types{
  padding: 0;
  height: 20px;
  line-height: 20px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin:10px 10px;
  text-decoration-line: none;
  border: 1px solid rgb(255, 131, 131);
  background: white;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  font-size: 14px;
  position: relative;
  line-height: 30px;
  color: #696969; 
  
  
}

.types::after{
  content: '';
  position: absolute;
  width: 10px;
  top: 38%;
  right: -6px;
  height: 10px;
  border-left: 1px rgb(255, 131, 131) solid;
  border-bottom: 1px rgb(255, 131, 131) solid;


  transform: rotate(45deg);
  background: rgb(255, 255, 255);
}
.number{
  border: 1px rgb(255, 131, 131) solid;
  margin-left: -10px;
  margin-top: 10px;
  z-index: 1;
  height: 30px;
  padding-bottom: -10px;
  padding-left: 5px;
  line-height: 30px;
  padding-right: 10px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
  border-left: none;
}

.types:hover{
  background-color: #eee;
}

.blog{
  margin-top: 20px;
  border-top: 2px #baf solid;
  width: 70%;
  margin-left:15%;
  background-color:white;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
a{
  text-decoration-line: none;
  font-size: 16px;
  color: rgb(31, 34, 57);
}

.bl:hover{
  background-color: #eee;
}
.userInfo :hover{
  background-color: rgb(164, 164, 164);
}

</style>